<!DOCTYPE html>
<html lang="en">
<head>

  <!-- 页面meta -->

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>查寝信息主页</title>
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/style.css">
</head>

<body class="hold-transition">

<div id="app">

  <div class="app-container">

    <center>
      <el-button type="primary" plain @click="studentManage">学生管理</el-button>
      <el-button type="primary" plain @click="helperManage">助手管理</el-button>
      <el-button type="primary" plain @click="checkDormManage">点名管理</el-button>
      <el-button type="primary" plain @click="leaveManage">请假管理</el-button>
      <el-button type="primary" plain @click="noticeManage">通告管理</el-button>

    </center>
    <div class="box">
      <center>
        <div class="filter-container" style="display: inline">
          <el-input
                  placeholder="请输入姓名"
                  prefix-icon="el-icon-search"
                  style="width: 220px;margin-left: 5px"
                  v-model="sname"
          >
          </el-input>
          <div class="block" style="display: inline" >
            <span class="demonstration"></span>
            <el-date-picker
                    v-model="beginTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择开始时间">
            </el-date-picker>
          </div>
          <div class="block" style="display: inline">
            <span class="demonstration"></span>
            <el-date-picker
                    v-model="endTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择结束时间">
            </el-date-picker>
          </div>
            <el-select  placeholder="请选择查寝状态" v-model="checkState">
              <el-option label="" value=""></el-option>
              <el-option label="已归" value="已归"></el-option>
              <el-option label="未归" value="未归"></el-option>
            </el-select>
          <el-button type="primary" icon="el-icon-search" style="margin-left: 5px" @click="getAll">搜索</el-button>
        </div>
      </center>


      <!--stripe highlight-current-row/-->
      <el-table size="small" current-row-key="id" :data="dataList" >
        <el-table-column prop="id" label="编号" align="center"  hidden></el-table-column>

        <el-table-column prop="hid" align="center" label="查寝人编号"></el-table-column>

        <el-table-column prop="sname" label="名字" align="center"></el-table-column>
        <el-table-column prop="checkTime" label="查寝时间" align="center"></el-table-column>


        <el-table-column prop="checkState" label="查寝状态" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>

        </el-table-column>

      </el-table>

      <center>
        <div class="block">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.currentPage"
                  :page-sizes="[2, 5, 10, 15]"
                  :page-size="pagination.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total">
          </el-pagination>
        </div>
      </center>


    </div>

  </div>

</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
  var vue = new Vue({
    el: '#app',
    data:{
      dataList: [],//当前页要展示的列表数据
      dialogFormVisible: false,//添加表单是否可见
      dialogFormVisible4Edit:false,//编辑表单是否可见
      dialogFormVisibleBorrow:false, //编辑借书表单是否可见
      sname:undefined,
      beginTime:undefined,
      endTime:undefined,
      value: true,
      checkState:undefined,
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:2,//每页显示的记录数
        total:0,//总记录数
      },

      total:'',
      borrow:{
        borrowNums:'',
        id:''
      },
      one:"",
      two:"",
      three:[]
    },

    //钩子函数，VUE对象初始化完成后自动执行
    mounted() {
      this.getAll();
    },

    methods: {
      //列表
      getAll() {
        axios.get("http://localhost:80/checkdorm/admin/page",{
          params:{
            pageNum: this.pagination.currentPage,
            pageSize: this.pagination.pageSize,
            sname: this.sname,
            beginTime: this.beginTime,
            endTime: this.endTime,
            checkState: this.checkState
          }
        }).then(res=>{
          console.log(res)
          this.dataList=res.data.data.records;
          this.pagination.total=res.data.data.total
          this.sname=undefined
          this.beginTime=undefined
          this.endTime=undefined
          this.checkState=undefined
        })

      },


      //重置表单
      resetForm() {
        this.formData={};
      },

      //添加
      handleAdd () {
        axios.post("/student/insert",this.formData).then((res)=>{
          if ((res.data.errMsg)!=null){
            this.$message.error(res.data.errMsg);
            return;
          }else {
            this.dialogFormVisible=false;
            this.$message.success("添加成功");
          }
        })

      },
      //取消
      cancel(){
        this.dialogFormVisible=false;
        this.dialogFormVisible4Edit=false;
        this.dialogFormVisibleBorrow=false;
        this.borrow.borrowNums=''
        this.borrow.borrowNums=''
        this.$message.info("当前操作取消");
      },
      handleCurrentChange(val){
        this.pagination.currentPage=val;
        this.getAll();
      },
      handleSizeChange(val){
        this.pagination.pageSize=val;
        this.getAll();
      }
      ,
      handleDelete(row){
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete("http://localhost:80/checkdorm/del/"+row.id).then((res)=>{
            this.$message.success(res.data.msg)
            this.getAll()
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      studentManage(){
        window.location.href="http://localhost:80/xu/pages/students.html"
      },
      helperManage(){
        window.location.href="http://localhost:80/wu/pages/helper.html"
      },
      checkDormManage(){
        window.location.href="http://localhost:80/wu/pages/checkDorm.html"
      },
      leaveManage(){
        window.location.href="http://localhost:80/wu/pages/leaves.html"
      },
      noticeManage(){
        window.location.href="http://localhost:80/xu/pages/board.html"
      }




    }
  })

</script>
</html>